<template>
  <div>
    <p>时间：
      <input type="checkbox" id="seconds" v-model="showSecondsVal">
      <label for="seconds">秒数</label>
      <input type="checkbox" id="ampm" v-model="showampmVal">
      <label for="ampm">上午／下午</label>
      <input type="checkbox" id="24hour" v-model="show24hourVal">
      <label for="24hour">二十四小时制</label>
    </p>
  </div>
</template>

<script>
export default {
  name: 'time-ctrl',
  props: {
    showSeconds: {
      type: Boolean,
      default: true
    },
    show24hour: {
      type: Boolean,
      default: true
    },
    showampm: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      showSecondsVal: this.showSeconds,
      show24hourVal: this.show24hour,
      showampmVal: this.showampm
    }
  },
  watch: {
    showSecondsVal: function(val) {
      this.$emit('updateShowSeconds', val);
    },
    show24hourVal: function(val) {
      this.$emit('updateShow24hour', val);
    },
    showampmVal: function(val) {
      this.$emit('updateShowampm', val);
    }
  }
}
</script>
